<template>
	<view>
		<u-popup v-model="couponShow" mode="bottom" border-radius="32" :mask-close-able="false">
			<view class="po-bikan">
				<view class="flex flex_sb">
					<view class="bk-title u-m-b-32">
						选择优惠券
					</view>
					<view class="u-font-12 u-m-b-32" @click="shiyong('')">
						不使用
					</view>
				</view>
				
				<scroll-view scroll-y="true" style="height: 650rpx;">
					<view class="yhq-div">
						<view class="yhq-item flex" v-for="(item,index) in datalist" :key="index">
							<view class="i-left flex flex_cen" >
								<view class="yuan1"></view>
								<view class="yuan2"></view>
								<view class="text_center">
									<view class="">
										<span class="n-fh">￥</span>
										<span class="m-num">{{item.jian_price}}</span>
									</view>
									<view class="manjian">
										满{{item.man_price}}元可用
									</view>
								</view>
								
							</view>
							<view class="i-right flex flex_sb">
								<view class="">
									<view class="y-mc">
										{{item.title}}
									</view>
									<view class="y-yxq">
										有效期至{{item.e_time}}
									</view>
								</view>
								<view class="y-btn" @click="shiyong(item)">
									使用
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<!-- <view class="bottom-btn flex flex_cen u-m-t-20">
					<view class="flex x-btn flex_cen" @click="nexttick">
						确 认
					</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "couponList",
		data() {
			return {
				datalist:[],
				// zixunShow: false,
			};
		},
		props: {
			couponShow: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: '1'
			},
		},
		created() {
			this.getlist()
		},
		methods: {
			shiyong(e) {
				this.$emit('shiyong',e)
			},
			getlist(){
				this.$api({
					url: '/myYhqList',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						status:1,
						type:this.type
					},
				}).then(res => {
					if (res.code == 1) {
						this.datalist=res.data.list
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.bottom-btn {
		margin-left: -32rpx;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		color: #ffffff;
	
		.x-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			position: relative;
			font-size: 36rpx;
		}
	
		
	}
	.yhq-div{
		
		.yhq-item{
			overflow: hidden;
			width: 686rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			
			
			
			.i-left{
				width: 240rpx;
				height: 200rpx;
				background: linear-gradient( 134deg, #FE5C3D 0%, #F3152E 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				position: relative;
				color: #FFFFFF;
				.yuan1{
					position: absolute;
					top: -13rpx;
					right:  -13rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
				}
				.yuan2{
					position: absolute;
					bottom: -13rpx;
					right:  -13rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					background-color: #FFFFFF;
				}
				
				.n-fh{
					font-weight: bold;
					font-size: 36rpx;
					
				}
				.m-num{
					font-weight: bold;
					font-size: 52rpx;
					
				}
				.manjian{
					font-size: 24rpx;
					
				}
			}
			.i-right{
				padding: 28rpx 20rpx;
				width: 446rpx;
				.y-mc{
					font-size: 32rpx;
					color: #333333;
				}
				.y-yxq{
					font-size: 24rpx;
					color: #666666;
					margin-top: 20rpx;
				}
				.y-btn{
					width: 136rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 2rpx solid #FE5C3D;
					font-size: 28rpx;
					color: #FE5C3D;
					text-align: center;
					line-height: 56rpx;
				}
				
				.yhq-img{
					width: 120rpx;
					height: 120rpx;
				}
			}
			
			
		}
	}
</style>